<script>
import TbColumn from "@/components/table/tbColumn";
import { TABLE_ENUM } from "@/components/table/enum";
import { deepClone, deepEqual, isNull } from "@/utils/service";

export default {
  name: "columnFilter",
  computed: {
    TABLE_ENUM() {
      return TABLE_ENUM;
    },
    isShow() {
      return this.column.filterAble && this.value !== undefined && this.value !== null;
    }
  },
  props: {
    column: {
      type: TbColumn,
      required: true
    }
  },
  watch: {
    column: {
      handler(v1, v2) {
        this.initValue();
      }
    }
  },
  data() {
    return {
      visible: false,
      width: 300,
      value: undefined
    };
  },
  mounted() {
    switch (this.column.filterMode) {
      case TABLE_ENUM.FilterModeEnum.INTEGER_SCOPE:
        this.width = 280;
        break;
      case TABLE_ENUM.FilterModeEnum.DATE_SCOPE:
        this.width = 230;
        break;
      default:
        this.width = 300;
    }
    this.initValue();
  },
  methods: {
    isNull,
    deepEqual,
    copyValue() {
      this.value = deepClone(this.column.filterValue);
    },
    initValue() {
      if (!this.column.isFilterActive()) {
        return;
      }
      if (!this.column.filterValueActive()) {
        this.column.initFilterValue();
        this.copyValue();
      }
    },
    clearValue() {
      this.column.initFilterValue();
      this.copyValue();
      this.visible = false;
    },
    filter() {
      this.visible = false;
      this.column.filterValue = deepClone(this.value);
      this.$emit("filterHandler");
    }
  }
};
</script>

<template>
  <div style="display: inline-block">
    {{ column.label }}
    <el-popover
      v-if="isShow"
      placement="bottom"
      :width=width
      v-model="visible"
    >
      <div>
        <div style="text-align: center">
          <div v-if="deepEqual(column.filterMode,TABLE_ENUM.FilterModeEnum.INTEGER_SCOPE)">
            <el-tooltip effect="dark" content="最小值" placement="top">
              <el-input-number size="mini" v-model="value[0]" :max=value[1]></el-input-number>
            </el-tooltip>
            ~
            <el-tooltip effect="dark" content="最大值" placement="top">
              <el-input-number size="mini" v-model="value[1]" :min=value[0]></el-input-number>
            </el-tooltip>
          </div>
          <div v-else-if="deepEqual(column.filterMode,TABLE_ENUM.FilterModeEnum.PERCENTAGE_SCOPE)">
            <el-tooltip effect="dark" content="最小值" placement="top">
              <el-input-number size="mini" v-model="value[0]" :max=value[1] :precision="2"></el-input-number>
            </el-tooltip>
            ~
            <el-tooltip effect="dark" content="最大值" placement="top">
              <el-input-number size="mini" v-model="value[1]" :min=value[0] :precision="2"></el-input-number>
            </el-tooltip>
          </div>
          <div v-else-if="
          deepEqual(column.filterMode,TABLE_ENUM.FilterModeEnum.DATE_SCOPE)
          || deepEqual(column.filterMode,TABLE_ENUM.FilterModeEnum.TIMESTAMP_RANGE)">
            <el-date-picker
              value-format="yyyy-MM-dd"
              style="width: 220px"
              align="center"
              size="mini"
              v-model="value"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div v-else-if="deepEqual(column.filterMode,TABLE_ENUM.FilterModeEnum.STR_LIKE)">
            <el-input
              type="textarea"
              autosize
              placeholder="模糊匹配"
              v-model="value">
            </el-input>
          </div>
          <div v-else-if="deepEqual(column.filterMode,TABLE_ENUM.FilterModeEnum.EQ)">
            <el-input
              type="textarea"
              autosize
              placeholder="全等匹配"
              v-model="value">
            </el-input>
          </div>
        </div>
        <div style="text-align: center;margin-top: 10px">
          <el-button size="mini" type="info" @click="clearValue">重置</el-button>
          <el-button size="mini" type="success" @click="filter">筛选</el-button>
        </div>
      </div>
      <em style="font-size: 12px;font-weight: bold" slot="reference" class="el-icon-search" @click.stop></em>
    </el-popover>
  </div>
</template>

<style scoped>

</style>